import React, { Component } from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as action from "../action"
import { Icon } from 'react-vant';
import Dirlog1 from '../components/dirlog';
class Address extends Component {
    state = {
        show:false,
        delindex:0
    }
    componentDidMount() {
        this.props.getAddressList()
    }
    goForm(item,isadd,index) { // 点击跳转页面
        console.log(item,isadd);
        if (isadd == "编辑") {
            this.props.history.push({
                pathname: "/form",
                state:{
                    item,
                   isadd, 
                    index
                }
            })
        } else {
            this.props.history.push({
                pathname: "/form",
                state:{
                    isadd
                }
            })
        }
      
    }
    delfn(index) {
        console.log(index);
        this.setState({
            delindex:index,
            show:true
        })
    }
    delfnsure () { // 删除确定的函数
        // 1去掉用仓库里的删除方发
        // 关了弹窗
      
      
    }
    closefn = (data) => { // 涉及到组件通信得方法都用箭头函数，避免this指向问题
        console.log(data); // data就是子组件传递过来得参数
        this.setState({
            show:data
        })
    }
    render() {
        return (
            <div>
                {
                    this.props.adrressarr && this.props.adrressarr.length ? this.props.adrressarr.map((item, index) => {
                        return <div key={index} className="addresswrap">
                            <p>地址：{item.address}</p>
                            <p>姓名：{item.name}</p>
                            <p>电话：{item.phone}</p>
                            <p><Icon name="upgrade" onClick={this.goForm.bind(this,item,"编辑",index)}/><button onClick={this.delfn.bind(this, index)}>删除</button></p>

                        </div>

                    }) : "请添加一条地址"
                }
                <button onClick={this.goForm.bind(this,null,"新增")}>新增地址</button>
               
                <Dirlog1 delindex = {this.state.delindex} show = {this.state.show} closefn1 = {this.closefn}></Dirlog1>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        ...state.shopReducer
    }
}
const mapDispatchToProps = (dispatch) => bindActionCreators(action, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Address)